﻿@model Model.AppUserList
@{
    ViewBag.Title = "FileManage";
    Layout = "~/Views/Shared/_JQBaseLayOut.cshtml";
}
@using Model
<style type="text/css">
    #dlg table {
        width: 100%;
        border-collapse: collapse;
    }

        #dlg table tr {
            height: 35px;
        }

            #dlg table tr td input {
                height: 20px;
                line-height: 20px;
                width: 150px;
            }

            #dlg table tr td {
                border: 1px solid #ccc;
            }

                #dlg table tr td:first-child {
                    text-align: right;
                }
</style>
<style>
    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    .white_content {
        display: none;
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }

    .white_content_small {
        display: none;
        position: absolute;
        top: 20%;
        left: 30%;
        width: 40%;
        height: 50%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
</style>
@section JQscriptSection{
    <script type="text/javascript">
        $(document).ready(function () {
            InitGrid();
        });

        function InitGrid() {
            var systemID = $('#systemName').datebox('getValue');
            var sModularID = $('#modularName').datebox('getValue');
            queryParams = {
                systemID: systemID,
                modularID: sModularID
            }
            HandleData.InitDataGrid('dg', '/FileManage/InitJsonResult', 'toolbar', queryParams, 'FILEID', true, function (data) { }, function (data) { }, function (data) { }, function (data) { }
               , function (data) { }, function (e, rowIndex, rowData) { //右键时触发事件
                   e.preventDefault(); //阻止浏览器捕获右键事件
                   $("#dg").datagrid("clearSelections"); //取消所有选中项
                   $("#dg").datagrid("selectRow", rowIndex); //根据索引选中该行
                   if (rowData.FILETYPE != "图片") {
                       $("#yulan").hide();
                   } else {
                       $("#yulan").show();
                   }
                   $('#menu').menu('show', {
                       //显示右键菜单
                       left: e.pageX,//在鼠标点击处显示菜单
                       top: e.pageY
                   });

               });
        }
        HandleDom.ClassTriggerClick("icon-add", function () {
            HandleDialog.OpenDialogByAdd('dlg', '上传文件', function () {
                HandleData.ClearForm('location');
                HandleData.SetValueComboBox('ssystemName', "0");
                HandleData.SetValueComboBox('smodularName', "0");
                HandleData.SetValueComboBox('fileType', "1");
            });
        });

        //下载文件
        HandleDom.ClassTriggerClick("icon-download", function () {
            var row = HandleData.GetDataGridSelected("dg");
            var form = $('#dlfile');
            form.form('submit', {
                url: '@Url.Content("~/FileManage/Download")' + '?url=' + row.FILEURL + "&fileName=" + row.FILENAME,
                success: function (data) {
                    eval('data=' + data);
                }
            });
        });

        //预览图片
        HandleDom.ClassTriggerClick("icon-imgage", function () {
            var row = HandleData.GetDataGridSelected("dg");
            if (row.FILETYPE == "图片") {
                ShowDiv('MyDiv', 'fade', row.FILEURL);
            } else {
                layer.alert('对不起目前只支持图片预览!', 3);
            }



        });

        function saveData(isClose) {
            var fileObj = document.getElementById("uploadfile").files;

            HandleRequest.submitForm('location', '@Url.Action("SaveData", "FileManage")', function (data) {
                eval('data=' + data);
                if (data.success == true) {
                    layer.alert('执行成功!', 9);
                    InitGrid();
                    HandleDialog.CloseDialog('dlg');
                } else {
                    layer.msg(data.msg, 1);
                }

            });
        }

        function ShowDiv(show_div, bg_div, imguUrl) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $("#" + bg_div).height($(document).height());
            $("#showImg").attr("src", "../" + imguUrl);

        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };
    </script>
}

<body style="background-color: ButtonFace; font-size: 17px">
    <div class="easyui-panel" title="查询条件" style="height: 130px; padding: 5px; background: #fafafa; width: 1700px;">
        <form id="query" method="post">
            <table>
                <tr>
                    <td>系统名称:
                    </td>
                    <td>
                        <input id="systemName" class="easyui-combobox" name="systemName"  data-options="valueField:'SYSTEMID',textField:'SYSTEMNAME',url:'@Url.Action("GetOAFileSystemList", "BaseData", new { isDefault = true, defaultValue = "请选择系统" })',editable:false">
                    </td>
                    <td>模块名称:
                    </td>
                    <td>
                        <input id="modularName" class="easyui-combobox" name="modularName" style="width: 155px;" data-options="required:true,valueField:'MODULARID',textField:'MODULARNAME',url:'@Url.Action("GetOAFileModularList", "BaseData", new { isDefault = true, defaultValue = "请选择模块" })',editable:false">
                    </td>
                    <td>
                        <a id="btnSerach" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="InitGrid()">查询</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div style="min-height: 720px; width: 1700px;">
        <table id="dg" title="系统文档信息" style="min-height: 600px;">
            <thead>
                <tr>
                    <th data-options="field:'FILEID',width:30">ID</th>
                    <th data-options="field:'SYSTEMNAME',width:80">系统名称</th>
                    <th data-options="field:'MODULARNAME',width:80">模块名称</th>
                    <th data-options="field:'FILETYPE',width:80">文件类型</th>
                    <th data-options="field:'FILEREMARKS',width:100">文件说明/备注</th>
                    <th data-options="field:'FILEDATE',width:100,sortable:true,formatter:function(value, rowData, rowIndex){ return FormatData.formatDate(value);}">上传时间</th>
                    <th data-options="field:'USERNAME',width:50">创建人</th>

                </tr>
            </thead>
        </table>
    </div>
    <div id="dlg" class="easyui-dialog" style="width: 420px; height: 250px; top: 300px; left: 400px; padding: 2px"
        data-options="closed:true,buttons:'#dlg-buttons',modal:true">
        <form id="location" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td>请选择系统:
                    </td>
                    <td>
                        <input id="ssystemName" class="easyui-combobox" name="ssystemName"  data-options="valueField:'SYSTEMID',textField:'SYSTEMNAME',url:'@Url.Action("GetOAFileSystemList", "BaseData", new { isDefault = true, defaultValue = "请选择系统" })',editable:false">
                    </td>

                </tr>
                <tr>
                    <td>请选择模块:
                    </td>
                    <td>
                        <input id="smodularName" class="easyui-combobox" name="smodularName"  data-options="valueField:'MODULARID',textField:'MODULARNAME',url:'@Url.Action("GetOAFileModularList", "BaseData", new { isDefault = true, defaultValue = "请选择模块" })',editable:false">
                    </td>

                </tr>
                <tr>
                    <td>文件类型:
                    </td>
                    <td>
                        <select id="fileType" class="easyui-combobox" name="fileType" style="width: 154px;">
                            <option value="1">图片</option>
                            <option value="2">word</option>
                            <option value="3">Excel</option>
                            <option value="4">流程图</option>
                            <option value="5">其他</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>文件作用/备注:
                    </td>
                    <td>
                        <input id="txtFileRemarks" name="txtFileRemarks" class="easyui-validatebox" style="width: 154px" data-options="required:true" />
                    </td>

                </tr>
                <tr>
                    <td>请选择上传文件:</td>
                    <td>
                        @* <input id="FileUpload" type="file" name="FileUpload" class="easyui-validatebox" />*@
                        <input type="file" id="uploadfile" name="uploadfile" class="uploadfile" style="width: auto" multiple="multiple" runat='server ' />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a id="btnSave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveData(false)">保存</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <form id="dlfile" method="post">
        <div id="menu" class="easyui-menu" style="width: 100px; display: none;">

            <!--放置一个隐藏的菜单Div-->
            <div data-options="iconCls:'icon-download'" class="icon-download">下载</div>
            <!--具体的菜单事件请自行添加，跟toolbar的方法是基本一样的-->
            <div data-options="iconCls:'icon-imgage'" class="icon-imgage" id="yulan">预览</div>

        </div>
    </form>
    <!--弹出层时背景层DIV-->
    <div id="fade" class="black_overlay">
    </div>
    <div id="MyDiv" class="white_content">
        <div style="text-align: right; cursor: default; height: 40px;">
            <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>
        <img id="showImg" name="showImg" src="" />
    </div>
    @Html.Partial("~/Views/Shared/_PartialToolbar.cshtml", new Toolbar
{
    GridName = "dg",
    GridType = "datagrid",
    ToolbarName = "toolbar",
    FunctionModule = new Dictionary<string, List<FunctionModule>>()
    {
        {"Function",new List<FunctionModule>()
            {
              new FunctionModule(){Name = "Add",IsEnable =true },
              new FunctionModule(){Name = "Edit",IsEnable =false },
              new FunctionModule(){Name = "Remove",IsEnable =false },
              new FunctionModule(){Name = "Reload",IsEnable =false },
              new FunctionModule(){Name = "Collapse",IsEnable =false },
              new FunctionModule(){Name = "Exporter",IsEnable =false },
              new FunctionModule(){Name = "AllAdd",IsEnable =false },
              
              
            }
        }
    }
})

</body>

